<template>
  <n-modal :show="state.dialogFormVisible" @onUpdateShow="close">
    <div class="name-auth-dia">
      <div class="nav">
        <div class="title">修改用户昵称</div>
        <div class="close" @click="close">
          <i class="landscape landscape-guanbi"></i>
        </div>
      </div>
      <div class="con">
        <NForm ref="ruleForm" :model="queryForm" show-feedback :rules="rules">
          <n-form-item
            require-mark-placement="left"
            label="用户昵称"
            path="nickname"
          >
            <n-input
              v-model:value="queryForm.nickname"
              placeholder="用户昵称，2~8个汉字/4~16个字符"
            />
          </n-form-item>
        </NForm>
        <div class="tool flex">
          <n-button class="btn" @click="close">取消</n-button>
          <n-button
            class="btn confirm-btn"
            type="primary"
            :disabled="submitDis"
            @click="handleValidateClick"
          >
            确认
          </n-button>
        </div>
      </div>
    </div>
  </n-modal>
</template>
<script setup lang="ts">
import { NButton, NForm, NFormItem, NInput, NModal } from 'naive-ui'
import type { FormRules, FormInst, FormItemRule } from 'naive-ui'
import { computed, reactive, ref } from 'vue'
import loginApi from '@/service/api/login'
import { isNickName } from '@/utils/validate'
import { useAppsStore } from '@/stores/modules/app'
const emit = defineEmits(['success'])
const useStore = useAppsStore()
const { doUserInfo } = useStore
const submitDis = computed(() => {
  return !queryForm.value.nickname
})
const queryForm = ref({
  nickname: ''
})
const validateNickNameLenth = (_: FormItemRule, value: string): boolean => {
  return isNickName(value)
}
const rules: FormRules = {
  nickname: [
    {
      required: true,
      message: '用户昵称不能为空',
      trigger: 'blur'
    },
    {
      validator: validateNickNameLenth,
      message: '2~8个汉字/4~16个字符',
      trigger: 'blur'
    }
  ]
}
const ruleForm = ref<FormInst | null>(null)
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  ruleForm.value?.validate((errors: any) => {
    if (!errors) {
      save()
    }
  })
}
let requestLoading = false
const save = async () => {
  if (requestLoading) return
  requestLoading = true
  const { code, msg } = await loginApi.doUpdInfo(queryForm.value)
  if (code !== 0) {
    requestLoading = false
    msgUtil.$message.error(msg)
    return
  }
  msgUtil.$message.success('修改成功')
  doUserInfo()
  emit('success')
  close()
  requestLoading = false
}
const state = reactive({
  dialogFormVisible: false
})
const close = () => {
  queryForm.value.nickname = ''
  state.dialogFormVisible = false
}
const open = () => {
  state.dialogFormVisible = true
}
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.name-auth-dia {
  width: 476px;
  background: #fff;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 24px;
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .close {
      cursor: pointer;
      i {
        font-size: 24px;
        color: #666666;
      }
    }
  }
  .con {
    padding-top: 24px;
  }
  .tool {
    margin-top: 20px;
    justify-content: center;
    .btn {
      width: 124px;
      height: 40px;
    }
    .confirm-btn {
      margin-left: 24px;
    }
  }
}
</style>
